<template>
	<view>
		<view class="top ">
			<uni-icons type="notification"></uni-icons>
			您有礼品卡将于{{info.endTime}}过期，请尽快使用
		</view>
		<view class="block_1">
			<view class="its">
				<image src="../static/user/lp.png" mode=""></image>
				<view class="abs">
					<view class="abs_tit">
						<view class="flex_b">
							<view class="yuan" :style="{background:color}">
								<image src="../static/icon/lp.png" mode=""></image>
							</view>
							<view class="uname">
								{{info.cardName}}
							</view>
						</view>
						<view class="time">
							有效期至：{{info.endTime}}
						</view>
					</view>
					<view class="price" :style="{color:typechang == 1?'#29A85C':'#ffffff'}">
						<span class="s1" :style="{color:typechang == 1?'#29A85C':'#ffffff'}">￥</span>
						{{info.amountBalance}}
						<span class="s2">元</span>
					</view>

					<view class="num" v-if="info.cardNumber">
						{{info.cardNumber.replace(/(\d{4})(?=\d)/g, '$1 ')}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="block_2">
			<view class="tit">
				使用记录
			</view>
			<view class="items" v-for="(item,index) in list" :key="index">
				<view class="">
					<view class="t1">订单编号：{{item.orderNumber}}</view>
					<view class="t2">{{item.createTime}}</view>
				</view>
				<view class="price">
					{{item.changeType}}{{item.changeAmount}}
				</view>
			</view>
			<view class="kong" v-if="nolist">
				<image src="/static/dd.png" mode=""></image>
			</view>
		</view>
		<view class="" style="height: 50rpx;"></view>
	</view>
</template>

<script>
	import {
		cardHistoryList
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				colorList: [
					'#C30000',
					'#EB5A00',
					'#29A85C',
					'#FFAF43',
					'#000000',
				],
				color: '',
				info:{},
				params:{
					id:'',
					pageNum: 1,
					pageSize: 10
				},
				list:[],
				nolist:false,
				isBottom:false
			};
		},
		onLoad(option) {
			this.info = JSON.parse(decodeURIComponent(option.item))
			this.params.id= this.info.id
			this.color = this.colorList[Math.floor(Math.random() * 5)]
			this.getlist()
		},
		onReachBottom() {
			this.isBottom = true
			this.params.pageNum ++
			this.getlist()
		},
		methods:{
			getlist(){
				cardHistoryList(this.params).then(res => {
					this.list.push(...res.rows)
					let total = Math.ceil(res.total / this.params.pageSize);
					this.nolist = total == 0
					if(this.isBottom &&this.list.length == res.total){
						uni.showToast({
							title:'已加载全部',
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.kong{
		width: 240rpx;
		margin: 120rpx auto;
		text-align: center;
		font-size: 26rpx;
		image{
			width: 240rpx;
			height: 240rpx;
		}
	}
	page {
		background: #FBFBFB;
	}

	.top {
		width: 750rpx;
		height: 60rpx;
		background: #F8EEE8;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 22rpx;
		color: #000000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.block_1 {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 20rpx;
		box-sizing: border-box;
		.its {
			width: 710rpx;
			height: 260rpx;
			position: relative;
			image {
				width: 100%;
				height: 260rpx;
			}
		
			.abs {
				top: 0%;
				position: absolute;
				width: 100%;
				height: 260rpx;
				padding: 26rpx 20rpx;
				box-sizing: border-box;
				.abs_tit{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.yuan {
					width: 40rpx;
					height: 40rpx;
					border-radius: 20rpx;
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
				.uname{
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF ;
					margin-left: 20rpx;
				}
				.time{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #7E808C;
				}
				.price{
					font-family: 'DINB';
					font-size: 72rpx;
					margin-top: 44rpx;
					color: #29A85C;
					.s1{
						font-size: 40rpx;
					}
					.s2{
						font-size: 32rpx;
						color: #FFFFFF;
					}
				}
				.num{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					margin-top: 10rpx;
				}
			}
		
		}
	}
	.block_2{
		padding: 28rpx 20rpx;
		background: #fff;
		margin-top: 20rpx;
		.tit{
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #000000;
		}
		.items{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #eee;
			padding-bottom: 20rpx;
			margin-top: 30rpx;
			.t1{
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
			}
			.t2{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;
				margin-top: 8rpx;
			}
			.price{
				font-family:'DINB';
				font-weight: bold;
				font-size: 48rpx;
				color: #29A85C;
			}
		}
	}
</style>